/*
 * @Author: Wxx
 * @Date: 2022-02-22 09:39:22
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-22 09:53:36
 * @Description:
 */
import React, { Component } from "react";

export default class App extends Component {
  state = {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  };
  myDom = React.createRef();
  getSnapshotBeforeUpdate() {
    return this.myDom.current.scrollHeight;
  }
  componentDidUpdate(prevProps, prevState, value) {
    this.myDom.current.scrollTop += this.myDom.current.scrollHeight - value;
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              list: [...[11, 12, 13, 14, 15, 16, 17], ...this.state.list],
            });
          }}
        >
          来邮件
        </button>
        <div
          style={{
            height: "500px",
            overflow: "scroll",
            background: "yellow",
          }}
          ref={this.myDom}
        >
          <ul>
            {this.state.list.map((item) => (
              <li style={{ height: "200px" }} key={item}>
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}
